<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="$route.path"
          router
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
        >
          <!-- <el-submenu index="1">
            <template #title>
              <i class="el-icon-s-home"></i>
              <span>首页</span>
            </template>
            <el-menu-item index="home">
              <i class="el-icon-s-home"></i>
              <template #title>首页（合同能源管理）</template>
            </el-menu-item>
            <el-menu-item index="1-2">
              <i class="el-icon-s-home"></i>
              <template #title>首页（厂家）</template>
            </el-menu-item>
            <el-menu-item index="1-3">
              <i class="el-icon-s-home"></i>
              <template #title>首页（普通用户）</template>
            </el-menu-item>
          </el-submenu> -->
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <template #title>任务管理</template>
          </el-menu-item>
          <!-- <el-menu-item index="3">
            <i class="el-icon-video-camera-solid"></i>
            <template #title>大屏监控</template>
          </el-menu-item> -->
          <!-- <el-submenu index="4">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>任务管理</span>
            </template>
            <el-menu-item index="/order">
              <i class="el-icon-s-order"></i>
              <template #title>运行报表</template>
            </el-menu-item>
          </el-submenu> -->
          <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <template #title>设备统计</template>
          </el-menu-item>

          <el-submenu index="6">
            <template #title>
              <i class="el-icon-s-management"></i>
              <span>设备管理</span>
            </template>
            <!-- <el-menu-item index="1-3" disabled>
              <i class="el-icon-s-management"></i>
              <template #title>设备管理</template>
            </el-menu-item> -->
            <el-menu-item index="/addmanagement">
              <i class="el-icon-s-management"></i>
              <template #title>新增设备</template>
            </el-menu-item>
            <el-menu-item index="/projectlist">
              <i class="el-icon-s-platform"></i>
              <template #title>设备列表</template>
            </el-menu-item>

            <!-- <el-menu-item index="1-2">
              <i class="el-icon-s-management"></i>
              <template #title>绑定适配器</template>
            </el-menu-item> -->
          </el-submenu>
          <!-- <el-menu-item index="7">
            <i class="el-icon-postcard"></i>
            <template #title>设备组管理</template>
          </el-menu-item> -->
          <el-menu-item index="/alarm">
            <i class="el-icon-odometer"></i>
            <template #title>告警记录</template>
          </el-menu-item>
          <!-- <el-menu-item index="9">
            <i class="el-icon-data-line"></i>
            <template #title>历史数据</template>
          </el-menu-item> -->
          <el-menu-item index="/clients">
            <i class="el-icon-user"></i>
            <template #title>客户管理</template>
          </el-menu-item>
          <!-- <el-menu-item index="11">
            <i class="el-icon-notebook-2"></i>
            <template #title>基础数据</template>
          </el-menu-item> -->
          <el-submenu index="12">
            <template #title>
              <i class="el-icon-document-copy"></i>
              <span>模板设计</span>
            </template>
            <el-menu-item index="/attributes">
              <i class="el-icon-document-remove"></i>
              <template #title>参数列表</template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="30px">
          <!-- <el-button
          round
          v-for="item in routes"
          :key="item.title"
          @click="close(item.title)"
          >{{ item.title }}<i class="el-icon-upload el-icon--right"></i
        ></el-button> -->
          <el-tabs
            v-model="activeIndex"
            type="border-card"
            closable
            @tab-click="tabClick"
            v-if="options.length"
            @tab-remove="tabRemove"
          >
            <el-tab-pane
              :key="item.route"
              v-for="item in options"
              :label="item.name"
              :name="item.route"
            >
              <transition name="fade" mode="out-in">
                <keep-alive>
                  <router-view v-if="$route.meta.keepAlive">
                    <!-- 这里是会被缓存的视图组件 -->
                  </router-view>
                </keep-alive>
              </transition>
              <transition name="fade" mode="out-in">
                <router-view v-if="!$route.meta.keepAlive">
                  <!-- 这里是不被缓存的视图组件 -->
                </router-view>
              </transition>
            </el-tab-pane>
          </el-tabs>
        </el-header>
        <el-main class="content-wrap">
          <!-- <router-view></router-view> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    // console.log(this.myroute)
  },
  computed: {
    options() {
      return this.$store.state.options;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      },
    },
  },
  watch: {
    $route(to) {
      let flag = false;
      for (let option of this.options) {
        if (option.route === to.path) {
          flag = true;
          this.$store.commit("set_active_index", to.path);
          break;
        }
      }
      if (!flag) {
        this.$store.commit("add_tabs", { route: to.path, name: to.name });
        this.$store.commit("set_active_index", to.path);
      }
    },
  },
  methods: {
    close(title) {
      console.log(this.routes);
      for (let i in this.routes) {
        if (this.routes[i].title == title) {
          this.routes.splice(i, 1);
          break;
        }
      }
    },
    handleOpen(e) {
      console.log(e);
    },
    navigateTo(url, title) {
      this.$router.push(url);
      this.$set(this.routes, this.routes.length, { url, title });
      // this.routes.push({ url,title });
      console.log(this.routes);
    },
    // tab切换时，动态的切换路由
    tabClick(tab) {
      let path = this.activeIndex;
      this.$router.replace({ path: path });
    },
    tabRemove(targetName) {
      // 首页不可删除
      if (targetName == "/") {
        return;
      }
      this.$store.commit("delete_tabs", targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            "set_active_index",
            this.options[this.options.length - 1].route
          );
          this.$router.replace({ path: this.activeIndex });
        } else {
          this.$router.replace({ path: "/" });
        }
      }
    },
  },
};
</script>

<style scoped>
</style>
